import React from 'react';
import Topbar from '../../components/Topbar/Topbar';
import './Exchange.css';
import {SearchBar,Button,WhiteSpace,WingBlank,Link} from'antd-mobile';

class Exchange extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            exchangeData:[],
            attr:'https://www.prebeauty.work',
            imgface:[],
        };
      }

      componentDidMount(){
        this.getExchangeData()
      }

      getExchangeData(){
            fetch("https://www.prebeauty.work/exchange")
                .then((res) => res.json())
                .then(data => {
                    this.setState({
                        exchangeData:data,
                    })
                    console.log(this.state.exchangeData)
                })
                .catch(err => console.log(err));
      }
      nameChange(e){
        this.setState({
            name:e.target.value
        })
      }
      goadd(){
        this.props.history.push('/AddExchange')
      }
    //Enter时触发
      onSubmit(val){
          var allData=this.state.exchangeData
          var selectData=[]
          allData.map(data=>{
            console.log(data)
            if(data.name.indexOf(val)>=0){
                selectData.push(data);
            }
          })
          this.setState({
              exchangeData:selectData
          })
      }
      studyData(){
        var allData=this.state.exchangeData
        var studyData=[] 
        allData.map(data=>{
            console.log(data)
            if(data.group=='学习用品'){
                studyData.push(data);
            }
          })
          this.setState({
              exchangeData:studyData
          })
      }
      lifeData(){
        var allData=this.state.exchangeData
        var lifeData=[] 
        allData.map(data=>{
            console.log(data)
            if(data.group=='生活用品'){
                lifeData.push(data);
            }
          })
          this.setState({
              exchangeData:lifeData
          })
      }
      clothData(){
        var allData=this.state.exchangeData
        var clothData=[] 
        allData.map(data=>{
            console.log(data)
            if(data.group=='衣物饰品'){
                clothData.push(data);
            }
          })
          this.setState({
              exchangeData:clothData
          })
      }

	render() {
        return (
            <div className="Exchange">
                {/* 头部 */}
                <Topbar name="闲置阁" color='#95D2AA'/>
                    <SearchBar placeholder="Search" maxLength={8}
                               onSubmit={(val)=>{this.onSubmit(val)}}
                               onFocus={()=>{this.getExchangeData()}}
                               onCancel={()=>{window.location.reload()}}
                               style={{backgroundColor:'#95d2aa',margin:'10px'}}/>
                    {/* 标签分类 */}
                    <div className="biaoqian">
                            <div>
                                <div className="tag0" onClick={()=>{this.getExchangeData()}}>全部</div>
                                <div className="tag1" onClick={()=>{this.studyData()}}>学习用品</div>
                                <div className="tag2" onClick={()=>{this.lifeData()}}>生活用品</div>
                                <div className="tag3" onClick={()=>{this.clothData()}}>衣物饰品</div>
                            </div>
                    </div>
                    {/* 商品列表 */}
                    <div className='groupData'>
                        {
                        (!this.state.exchangeData)? null : this.state.exchangeData.map((val,index)=>{               
                            var img_list=val.imgs.split(';')
                            return(
                              <div className='goods'>
                                <img className='goods-img'
                                    src={this.state.attr+img_list[0]} 
                                    onClick={()=>{
                                    this.props.history.push('/Xiangqing',{id:val.id,name:val.name,src:this.state.attr+img_list[0]});
                                }}/>
                                <p className="goodsName">{val.name}</p><br></br>
                                <p className="price">￥{val.price}</p>
                                <p className="context">{val.context}</p>
                            </div>   
                            )
                        }
                        )
                        }
                    </div>

                    {/* 发布 */}
                    <div 
                        className="iconfont icon-jia-tianchong" 
                        style={{fontSize:30,position:'fixed',bottom:50,color:'#95d2aa',right:10,zIndex:9999}}
                        onClick={this.goadd.bind(this)}
                    ></div>
            </div>
        )
    }
  }
export default Exchange
